<template>
  <svg
    aria-hidden="true"
    class="svg-icon"
    :class="calsses"
    :style="props.diySize ? { fontSize: diySize, width: diySize, height: diySize } : ''"
  >
    <use :href="symbolId" />
  </svg>
</template>

<script lang="ts" setup>
  const props = defineProps({
    prefix: {
      type: String,
      default: 'icon',
    },
    name: {
      type: String,
      required: true,
    },
    color: {
      type: String,
      default: '#333',
    },
    size: {
      type: String,
      default: 'default',
    },
    diySize: {
      type: String,
    },
    transition: {
      type: Boolean,
      default: false,
    },
  })
  const symbolId = computed(() => `#${props.prefix}-svg-${props.name}`)
  const calsses = computed(() => {
    return {
      [`sdms-size-${props.size}`]: props.size,
      'svg-transition': props.transition,
    }
  })
  const fontSize = reactive({ default: '32px', small: '20px', large: '48px' })
</script>
<style lang="less" scoped>
  .svg-icon {
    width: 32px;
    height: 32px;
    fill: v-bind(color);
    vertical-align: middle;
    color: v-bind(color);
    &.svg-transition {
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
    &.sdms-size-small {
      font-size: 20px;
      height: 20px;
      width: 20px;
    }
    &.sdms-size-large {
      font-size: 48px;
      height: 48px;
      width: 48px;
    }
  }
</style>
